<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: solid;
            box-sizing: border-box;
        }
        .grid {
            display: flex; 
            flex-wrap: wrap;
        } 
        [class*="col-"] { 
            width: 100%; 
        }
        /* 超小屏幕 .col-xs- */ 
        @media only screen and (max-width: 768px){
            .col-xs-1 {
                flex: 0 0 8.33333%;    
            }
            .col-xs-2 {
                flex: 0 0 16.66666%;    
            }
            .col-xs-3 {
                flex: 0 0 25%;    
            }
            .col-xs-4 {
                flex: 0 0 33.33333%;    
            }
            .col-xs-5 {
                flex: 0 0 41.66666%;    
            }
            .col-xs-6 {
                flex: 0 0 50%;    
            }
            .col-xs-7 {
                flex: 0 0 58.33333%;    
            }
            .col-xs-8 {
                flex: 0 0 6.66666%;    
            }
            .col-xs-9 {
                flex: 0 0 75%;    
            }
            .col-xs-10 {
                flex: 0 0 83.33333%;    
            }
            .col-xs-11 {
                flex: 0 0 91.66666%;    
            }
            .col-xs-12 {
                flex: 0 0 100%;    
            }
        } 
        /* 平板 .col-sm- */ 
        @media only screen and (min-width: 768px){
            .col-sm-1 {
                flex: 0 0 8.33333%;    
            }
            .col-sm-2 {
                flex: 0 0 16.66666%;    
            }
            .col-sm-3 {
                flex: 0 0 25%;    
            }
            .col-sm-4 {
                flex: 0 0 33.33333%;    
            }
            .col-sm-5 {
                flex: 0 0 41.66666%;    
            }
            .col-sm-6 {
                flex: 0 0 50%;    
            }
            .col-sm-7 {
                flex: 0 0 58.33333%;    
            }
            .col-sm-8 {
                flex: 0 0 6.66666%;    
            }
            .col-sm-9 {
                flex: 0 0 75%;    
            }
            .col-sm-10 {
                flex: 0 0 83.33333%;    
            }
            .col-sm-11 {
                flex: 0 0 91.66666%;    
            }
            .col-sm-12 {
                flex: 0 0 100%;    
            }
        } 
        /* pc .col-md- */
        @media only screen and (min-width: 992px){
            .col-md-1 {
                flex: 0 0 8.33333%;    
            }
            .col-md-2 {
                flex: 0 0 16.66666%;    
            }
            .col-md-3 {
                flex: 0 0 25%;    
            }
            .col-md-4 {
                flex: 0 0 33.33333%;    
            }
            .col-md-5 {
                flex: 0 0 41.66666%;    
            }
            .col-md-6 {
                flex: 0 0 50%;    
            }
            .col-md-7 {
                flex: 0 0 58.33333%;    
            }
            .col-md-8 {
                flex: 0 0 6.66666%;    
            }
            .col-md-9 {
                flex: 0 0 75%;    
            }
            .col-md-10 {
                flex: 0 0 83.33333%;    
            }
            .col-md-11 {
                flex: 0 0 91.66666%;    
            }
            .col-md-12 {
                flex: 0 0 100%;    
            }
        } 
        /* 大屏 .col-lg- */ 
        @media only screen and (min-width: 1200px){
            .col-lg-1 {
                flex: 0 0 8.33333%;    
            }
            .col-lg-2 {
                flex: 0 0 16.66666%;    
            }
            .col-lg-3 {
                flex: 0 0 25%;    
            }
            .col-lg-4 {
                flex: 0 0 33.33333%;    
            }
            .col-lg-5 {
                flex: 0 0 41.66666%;    
            }
            .col-lg-6 {
                flex: 0 0 50%;    
            }
            .col-lg-7 {
                flex: 0 0 58.33333%;    
            }
            .col-lg-8 {
                flex: 0 0 6.66666%;    
            }
            .col-lg-9 {
                flex: 0 0 75%;    
            }
            .col-lg-10 {
                flex: 0 0 83.33333%;    
            }
            .col-lg-11 {
                flex: 0 0 91.66666%;    
            }
            .col-lg-12 {
                flex: 0 0 100%;    
            }
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">1</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">2</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">3</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">4</div>
    </div>
</body>
</html>